<template>
	<view class="brands">
		<view class="selected">
			精选品牌
		</view>
		<view class="list">
			<view class="selected-conten flex" v-for="(item,index) in brand_list" :key="index" @click="goBrandLists(url)">
				<view class="box-img" >
					<image class="selected-img" :src="item.img" mode="aspectFill"></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			brandList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				brand_list: [{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					},
					{
						img: 'https://fms.res.meizu.com/dms/2020/08/04/11d354a5-b70c-434b-bc45-8607db981574.jpg'
					}
				]

			}
		},
		methods:{
			goBrandLists(){
				uni.navigateTo({
					url:'/pages/brand/brand-list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.brands {
		height: 100%;
		padding: 0 8rpx;

		.selected {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #333333;
			text-align: center;
		}

		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.selected-conten {
				width: 49.2%;
				height: 224rpx;
				text-align: center;
				justify-content: center;
				background: #ffffff;
				margin-bottom: 8rpx;
				box-sizing: border-box;
				background: url("http://pic1.win4000.com/wallpaper/f/58a155852ce4d.jpg") no-repeat center center/cover;

				.box-img {
					width: 128rpx;
					height: 72rpx;
					display: block;
					border: 1rpx solid #FFFFFF;
					background-position: 50%;
					background-repeat: no-repeat;
					position: relative;

					.selected-img {
						width: 100%;
						height: 100%;
						position: absolute;
						top: -6rpx;
						left: -8rpx;
					}
				}
			}
		}
	}
</style>
